﻿@using Helpers;
@using MvcDatagrid.Models;

@model IEnumerable<MvcDatagrid.Models.Images>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 <div id="initNbPictures" style="visibility: hidden; display: none" >
        @Html.Raw(Json.Encode(Model.Count()));
 </div>
 <div>
    <div class="manager-page-title">
        <h1>Pictures Library</h1>
    </div>
    <div class="img-add">
        <img src="/Style/img/green_plus.png" />
    </div>
    <div>
        <div class="img-list-container">
            <div class="img-list">
                <ul id="pagination" data-bind="value: nbPictures">
                    <li><div>
                    @{ int i = 0; }
                    @foreach (var image in Model)
                    {
                        if (i % 12 == 0 && i!=0)
                        {
                           @:</div></li><li><div>
                        }
                        @Html.Partial("picture", image)
                        i++;
                    }
                    </div></li>
                </ul>
            </div>
            <div class="background-list"></div>
            <div id="pager"></div>
        </div>
    </div>
</div>
<div class="img-uploader">
    <div class="uploader-background"></div>
    <div class="uploader-box">
        <h2>UploadFiles</h2>
        @using (@Html.BeginForm("Index", "Pictures", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <div class="row fileupload-buttonbar">
                <div class="span7">
                    <div class="well">
                        <i class="icon-plus"></i>
                        <span>&nbsp;&nbsp;Add files...</span>
                        <input type="file" id="fileupload" name="fileupload" accept="image/*" multiple="multiple" />
                        <div class="clearfix">
                        </div>
                        <div class="progress">
                            <div class="bar" id="overallbar" style="width: 0%;"></div>
                        </div>
                    </div>
                </div>
                <div class="span7">
                    <div class="well hide" id="filelistholder">
                    </div>
                </div>
                <div class="span7">
                </div>
            </div>
        }
        <div class="uploader-cancel"><span>Cancel</span></div>
    </div>
</div>

<style type="text/css">
   .img-uploader 
    {
        display:none;
    }
    .img-uploader > div.uploader-background
    {
        position:fixed;  
        height:100%;  
        width:100%;  
        top:0;  
        left:0;  
        background:#000000;  
        z-index:1;  
        opacity:0.7;
    }
    
    .img-uploader > div.uploader-box
    {
        width: 400px;
        border:2px solid #cecece;  
        background-color: #D9D9D7;
        padding:12px;  
        font-size:13px;  
        font-family:Calibri;
        font-weight: bold;
        z-index: 2;
        position:absolute;  
        left:440px;
        top:350px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    }
    .img-add
    {
        margin:5px;
        text-transform: uppercase;
        text-align:center;
        width:85px;
        font-size:11px;
        color:White;
        cursor:pointer;
    }
    .uploader-cancel
    {
        border:2px solid #AAA9A9;  
        background-color: #C0C0BE;
        text-align:center;
        float:right;
        padding:2px;
        cursor:pointer;
    }
    .background-list
    {
        width:755px;
        top:0;
        z-index:1;
    }
    .background-list-activated
    {
        background-color: Black;
        opacity: 0.7;
        position: absolute;
        height: 440px;
    }
</style>

<script type="text/javascript">
    var nbFilesAdded = 0;
    var initNbPictures = 0;

    function AddUploadedPicturesToList(pictureView, pictureName) {
        //        if ((nbFilesAdded + initNbPictures) % 12 == 0) {
        $("[name='"+pictureName+"']").remove();
        $('ul#pagination > li').last().append(pictureView);
            //        }
        initNbPictures += nbFilesAdded; 
    }
    function UploadingPictureToList(divName) {
        $('ul#pagination > li').last().append("<div name = '" + divName + "' class='img-display'><div class='img-container' style='height:100px'><span>Loading</span></div></div>");
    }
    $(function () {

        initNbPictures = parseInt($("#initNbPictures").text());
        $('.uploader-cancel').click(function () {
            $('.img-uploader').hide();
        });
        $('.img-add').click(function () {
            $('.img-uploader').show();
        });
        $('#fileupload').fileupload({
            dataType: "json",
            url: "/Pictures/UploadManyFilesAction",
            progressInterval: 100,
            add: function (e, data) {
                nbFilesAdded = data.originalFiles.length;
//                $('#filelistholder').removeClass('hide');
//                data.context = $('<div />').text(data.files[0].name).appendTo('#filelistholder');
//                $('</div><div class="progress" style="width:200px; height:10px; border:1px solid blue"><div class="bar" style="width:0%; height:10px; background-color:Blue"></div></div>').appendTo(data.context);
                $('.img-uploader').hide();
                UploadingPictureToList(data.files[0].name);
                data.submit();
            },
            done: function (e, data) {
                //data.context.text(data.files[0].name + '... Completed');
                //$('</div><div class="progress" style="width:200px; height:10px; border:1px solid blue"><div class="bar" style="width:100%;height:10px; background-color:Blue"></div></div>').appendTo(data.context);
                AddUploadedPicturesToList(data.result.view, data.files[0].name);
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#overallbar').css('width', progress + '%');
            },
            progress: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                data.context.find('.bar').css('width', progress + '%');
            }
        });
    });
</script>